<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<script type="text/javascript" src="js/wow.min.js"></script>
</head>
<body>
    <!-- header -->
    <div class="header">   
    	   <div class="container">
    	   	    <div class="header_box">
    	   	    	<div class="logo">
    	   	    		  
    	   	    		<a href="#">Your Logo</a>
    	   	    	</div>  
                     <input type="checkbox" id="chec" />

                     <div class="header_chec">
                     	
                     	   <label for="chec">
                     	   	   <span></span>
                     	   	   <span></span>
                     	   	   <span></span>
                     	   </label>
                     </div>

    	   	    	<div class="nav">
    	   	    		<div class="nav_href">
    	   	    			    <a href="index.html">Home</a>
		    	   	    		 <a href="index2.html" target="_black">Portfolio</a>                
		    	   	    		 <a href="index3.html" target="_black">About</a>
		    	   	    		 
    	   	    		
                            <div class="blog">
                        	      <a href="index4.html" target="index4.html"><span>Blog</span></a>
                        	      <span>Search</span>
                        	      <span>  	
                        	      	  <img src="./images/search_bg.png">
                        	      </span>
                            </div>
                        </div>
    	   	    	</div>
    	   	    </div>
    	   </div>
    </div>
     <!-- header end-->
      <!-- banner -->
     <div class="banner">
     	<div class="container">
     		
     		<div class="banner_box">
              <input type="radio" id="one_1" name="sex" />
              <label for="one_1" id="one_t1"></label>
              <input type="radio" id="one_2" name="sex" />
              <label for="one_2" id="one_t2"></label>
              <input type="radio" id="one_3" name="sex" />
              <label for="one_3" id="one_t3"></label>
              <input type="radio" id="one_4" name="sex" />
              <label for="one_4" id="one_t4"></label>
              <input type="radio" id="one_5" name="sex" />
              <label for="one_5" id="one_t5"></label>

     			<ul class="banner_box_banner">
              
       				<li><img src="images/banner_bg1.png"></li>
       				<li><img src="images/banner_bg1.png"></li>
       				<li><img src="images/banner_bg1.png"></li>
       				<li><img src="images/banner_bg1.png"></li>
       				<li><img src="images/banner_bg1.png"></li>

     			</ul>

     			<h1 class="banner_title wow  fadeInUpBig" data-wow-duration="2s" data-wow-delay="0.5s">Good Design Is Good Business</h1>
     			<p class="banner_content wow  fadeInUpBig data-wow-duration="2s" data-wow-delay="0.6s"">
     				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. 
                     Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
     			</p>
                <div class="banner_more">
                	<a href="#">LEARN MORE</a>
                </div>
                
               


     		</div>
     	</div>

     </div>
     <!-- banner end-->

     <!--  services -->
     <div class="services">
         <div class="container">
             <div class="services_box">
                <div class="services_us wow  fadeInUpBig"  data-wow-duration="2s" data-wow-delay="0.5s">
                    oUR SERVICES
                </div>
             <!-- 做弹性盒子 -->
                   <div class="services_list">

                          <div> 
                              
                              <div class="services_img wow fadeInUpBig " data-wow-duration="2s" data-wow-delay="0.5s">
                                  <img src="images/services_list1.png">
                              </div>
                              <h3 class="services_title">
                                  Web Design
                              </h3>
                              <p class="services_desc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec ipsum at lacus commodo suscipit. <span>Details...</span>
                              </p>

                          </div>
                           <div>
                              
                              <div class="services_img wow fadeInUpBig " data-wow-duration="2s" data-wow-delay="0.5s">
                                  <img src="images/services_list2.png">
                              </div>
                              <h3 class="services_title">
                                  Search Optimization
                              </h3>
                              <p class="services_desc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec ipsum at lacus commodo suscipit. <span>Details...</span>
                              </p>

                          </div>
                           <div>
                              
                              <div class="services_img wow fadeInUpBig " data-wow-duration="5s" data-wow-delay="0.5s">
                                  <img src="images/services_list3.png">
                              </div>
                              <h3 class="services_title">
                                 Online Shop
                              </h3>
                              <p class="services_desc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec ipsum at lacus commodo suscipit. <span>Details...</span>
                              </p>

                          </div>
                           <div>
                              
                              <div class="services_img wow fadeInUpBig " data-wow-duration="5s" data-wow-delay="0.5s">
                                  <img src="images/services_list4.png">
                              </div>
                              <h3 class="services_title">
                                  Social Media
                              </h3>
                              <p class="services_desc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec ipsum at lacus commodo suscipit. 
                                    <span>Details...</span>
                              </p>

                          </div>
                   </div>
             </div>
         </div>
     </div>
     <!-- works -->
     <div class="work">
       
       <div class="container">
           <div class="work_box">
               <div class="work_header">
                    <div class="work_header_left">Our Portfolio Awesome</div>
                    <div class="work_header_right">more works</div>
               </div>
               <div class="clear"></div>
               <div class="work_list">
                   <!-- 做弹性盒子 -->
                   <div>
                       <div class="work_img">
                         <img class=" wow fadeInUpBig  " data-wow-duration="2s" data-wow-delay="0.5s" src="images/work_bg1.png">
                       </div>
                       <h3>Lorem Ipsum Dolar Sit Amet</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec ipsum at lacus commodo suscipit.</p>
                   </div>
                   <div>

                       <div class="work_img">
                         <img src="images/work_bg1.png" class=" wow flip  " data-wow-duration="2s" data-wow-delay="0.5s" src="images/work_bg1.png">
                       </div>
                       <h3>Lorem Ipsum</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscinglit.</p>

                   </div>
                   <div>
                       <div class="work_img">
                         <img src="images/work_bg2.png" class=" wow flip  " data-wow-duration="2s" data-wow-delay="0.5s" src="images/work_bg1.png">
                       </div>
                       <h3>Lorem Ipsum Dolar Sit Amet</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
                          elitmauris nec ipsum at lacus commodo suscipit.
                       </p>
                   </div>



               </div>
           </div>
       </div>
   </div>
   <!-- work end -->
   <!-- offer -->

   <div class="offer">
     <div class="container">
        <div class="offer_box">
              
              <div class="offer_title">
                  <h1 class="wow flip " data-wow-duration="5s" data-wow-delay="0.5s">WHAT WE OFFER</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</p>


              </div>
              <div class="offer_list">
                   
                    <div>
                        <div class="offer_list_title">
                            <h3 >Web Design</h3>
                            <p>Lorem ipsum dolor sit amet, consect etur adipiscing elit. Ut ultricies sagittism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci luctuset.</p>
                            <span>Details</span>
                        </div>

                    </div>
                     <div>
                        <div class="offer_list_title">
                            <h3>Web Design</h3>
                            <p>Lorem ipsum dolor sit amet, consect etur adipiscing elit. Ut ultricies sagittism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci luctuset.</p>
                          
                        </div>
                        
                    </div>
                     <div>
                        <div class="offer_list_title">
                            <h3>Web Design</h3>
                            <p>Lorem ipsum dolor sit amet, consect etur adipiscing elit. Ut ultricies sagittism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci luctuset.</p>
                            <span>Details</span>
                        </div>
                        
                    </div>
                     <div>
                        <div class="offer_list_title">
                            <h3>Web Design</h3>
                            <p>Lorem ipsum dolor sit amet, consect etur adipiscing elit. Ut ultricies sagittism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci luctuset.</p>
                           
                        </div>
                        
                    </div>

              </div>

              <div class="offer_Testimonials">

                 <h1 class="wow flip " data-wow-duration="5s" data-wow-delay="0.5s">Testimonials</h1>
                  <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip at lacus commodo suscipit praesent sollicitudin enim vel mirhon”</p>

                  

                  <div class="offer_Testimonials_more">
  

                     <input type="radio" name="sex"  id="female1" />
                     <label for="female1">
                        <span ></span>
                     </label>
                     <span class="ceo">Jon Doe / CEO of LoremIpsum</span>


                     <input type="radio" name="sex"  id="female2" />
                     <label for="female2">
                         <span ></span>
                     </label>
                     <span class="ceo">Swift Doe / CEO of LoremIpsum</span>
                     


                     <input type="radio" name="sex"  id="female3" />
                     <label for="female3">
                        <span ></span>
                     </label>
                     <span class="ceo">Taylor Doe / CEO of LoremIpsum</span>
                     


                  </div>

              </div>

        </div>
     </div>
   </div>

   <!-- offer end -->
   <footer>
     
           <div class="container">   
              <div class="foot_box">        
                       <div>    
                             <h2>Twitter FEEDs</h2>
                             <ul class="foot_list">
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                             </ul>

                       </div>
                        <div>
                             <h2>NEWSLETTER</h2>
                             <ul class="foot_list">
                                <li>
                                  <span>Lorem ipsum dolor sit amet,consectetur adipiscing</span>
                                  <span> elit.Ut ultricies sagittis magna acomm. </span>
                                  
                                  <span>Ut eget eros mauris, ut cursus urna.</span>
                                  
                                </li>

                                <li class="email"> 
                                
                                    <form action="" method="">
                                         <input type="text" name="eamil" class="contact_eamil" />

                                         <input type="submit" class="contact_submit" value="Sign Up" />

                                    </form>
                                </li>
                             </ul>

                       </div>
                        <div> 
                             <h2>recent projects</h2>
                              <ul class="foot_list foot_list_bg">
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                              
                             </ul>

                       </div>
                        <div>
                           
                             <h2>Contact</h2>
                             <ul class="foot_list foot_list_pho">
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li>
                                <li>
                                  <span>Check out this great theme item</span>
                                  <span><a href="#">http://tadjalskfj.com</a></span>
                                  <span>2 weeks ago</span>
                                </li> 
                             </ul>
                       </div>
              </div>
           </div>
   </footer>

</body>
</html>
<script type="text/javascript">
   
   new WOW().init();

</script>